<template>
  <div>

    <el-upload
      v-if="!justDetail"
      class="avatar-uploader"
      action="#"
      :limit="1"
      accept=".png, .jpg, .jpeg, .bmp, .gif, .webp, .psd, .svg, .tiff"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleUploadChange"
      :on-remove="handleRemove">

      <img v-if="carUrl" :src="carUrl" class="avatar"/>

      <div class="upload-item" v-else>
        <span>{{upText}}</span>
      </div>

    </el-upload>
    <img v-else :src="carUrl" class="avatar"/>
  </div>
</template>

<script>


export default {
  data() {
    return {
      carUrl:'',

    }
  },
  props: {
    upText: {
      type: String,
      default: ''
    },
    justDetail:{
      type:Boolean,
      default: false
    }
  },
  methods: {
    handleUploadChange() {

    },

    handleRemove() {

    },
  }

}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.shrink {
  color: $primary;
  font-size: 13px;
}

.upload-item{
  width: 105px;
  height: 105px;
  position: relative;
  background-image: url("../../assets/images/upload_bg.png");
  background-size: 100% 100%;

  span{
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: $primary;
    font-size: 12px;
    white-space: nowrap;
  }
}

.avatar{
  width: 105px;
  height: 105px;
  border-radius: 5px;
}

</style>
